<template>
  <div class="contain-login">
    <div class="login-box">
      <div class="box-show">
        <img src="../assets/images/nice.png" alt="">
      </div>
      <div class="box-form">
        <div class="form-title">儿童呼吸GPT管理平台</div>
        <div class="form-form">
          <el-input placeholder="请输入账号" style="margin-top: 20px " v-model="userInfo.userName">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
          <el-input placeholder="请输入密码" show-password type="password" style="margin-top: 20px " v-model="userInfo.password">
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </div>
        <div class="form-btn" @click="getInHome">登 录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userInfo: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    getInHome() {
      for (let key in this.userInfo) {
        if (!this.userInfo[key]) {
          return this.$message.warning('请输入账号密码!!')
        }
      }
      this.axios.post('/user/login', this.userInfo).then(res => {
        if (res.data.code === 200) {
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.data.userInfo))
          sessionStorage.setItem("tokenName", res.data.data.tokenName)
          sessionStorage.setItem("tokenValue", res.data.data.tokenValue)
          this.$message.success('登陆成功')
          this.$router.replace('/home')
        }
      })

    }
  }
}
</script>

<style scoped lang="less">
.contain-login {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #0c4070;

  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    width: 55%;
    height: 500px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .box-show {
      width: 450px;
      height: 400px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .box-form {
      width: 400px;
      height: 100%;
      padding: 50px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      .form-title {
        width: 100%;
        font-size: 28px;
        color: #0c4070;
        font-weight: bold;
        text-align: center;
      }

      .form-form {
        width: 100%;

        /deep/ .el-input__inner {
          border-radius: 0;
          border: none;
          border-bottom: 1px solid #ccc;
        }
      }

      .form-btn {
        width: 60%;
        height: 40px;
        margin: 0 auto;
        background-color: #0c4070;
        border-radius: 20px;
        cursor: pointer;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    }

  }
}
</style>
